<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:util="http://java.sun.com/jsf/composite/components/util">
<ui:composition template="/WEB-INF/templates/mallTemplate.xhtml">
	<ui:define name="content">
		<h:form id="registerForm" prependId="false">
			<div class="signuploginbg">
				<div class="signuplogin">
					<div class="top-info blue-box">
				        <p class="top-info-p">注册赶集网只需10秒，发布、管理信息更轻松</p>
				        <div class="rj blt"></div>
				        <div class="rj blb"></div>
				        <div class="rj brt"></div>
				        <div class="rj brb"></div>
				    </div>		
					<div class="left">
						<div class="reg-box" style="position:relative;">
					            <div class="field">
					                <label for="username">#{message['customer.loginname.display']}：</label>
					                <input id="username" name="username" class="input-text" maxlength="32" type="text"/><div id="tip_username" class="tip">#{message['customer.loginname.tip.display']}</div>
					            </div>
					            <div class="field">
					                <label for="password">#{message['customer.loginpassword.display']}：</label>
					                <input autocomplete="off" value="" id="password" name="password" class="input-text" maxlength="32" type="password"/><div id="tip_password" class="tip"></div>
					            </div>
					            <div class="field">
					                <label for="confirm-password">#{message['customer.loginpassword.verify.display']}：</label>
					                <input autocomplete="off" value="" id="password2" name="password2" class="input-text" maxlength="32" type="password"/><div id="tip_password2" class="tip"></div>
					            </div>
								<div class="field">
					                <label for="verifycode">#{message['customer.verifycode.display']}：</label>
					                <input autocomplete="off" value="" id="verifycode1" name="verifycode1" class="input-text-verifycode" maxlength="10" type="text"/><span class="verify"><h:outputText id="verifyCodeForQuestion" value="#{createCustomerPage.verifyCodeForQuestion}"/><a4j:commandLink event="click" execute="@this" action="#{createCustomerPage.generateVerifyCode}" render="verifyCodeForQuestion" value="#{message['generate.verifycode.display']}" style="color:#f60"></a4j:commandLink></span>
					            </div>   
					            <div class="radio">
					            	<span style="width:232px; float:left;">
					                <h:selectBooleanCheckbox id="agreeFlag" value="#{createCustomerPage.agreeFlag}"></h:selectBooleanCheckbox>
					                <label for="term-of-service">#{message['receive.our.organization.display']}<a href="http://www.ganji.com/misc/abouts/index.php?act=termofservice" target="_blank">#{message['service.conditions.display']}</a></label>
					                </span>
					                <span id="tip_affirm" style="width:136px"></span>
					            </div>
					            <div id="reg-submit" class="reg-submit">
					                <h:commandLink styleClass="reg-btn" id="reg_submit" action="#{createCustomerPage.saveCustomer }" onclick="setRegForm()"></h:commandLink>
					            </div>
					            <div id="reg-msg" class="reg-submit">
					            	<util:messages errorMessages="#{createCustomerPage.errorMessages}"></util:messages>
				    				<h:message for="loginName" errorClass="errormessage"></h:message>
				    				<h:message for="loginPassword" errorClass="errormessage"></h:message>  
					            	<h:inputHidden id="loginName" value="#{createCustomerPage.customer.loginName}" maxlength="100" required="true" label="#{message['customer.loginname.display']}"><f:validator validatorId="EmailValidator"></f:validator></h:inputHidden>
					            	<h:inputHidden id="loginPassword" value="#{createCustomerPage.customer.loginPassword}" maxlength="32" required="true" label="#{message['customer.loginpassword.display']}"><f:validator validatorId="PasswordValidator"></f:validator></h:inputHidden>
					            	<h:inputHidden id="verifyCode" value="#{createCustomerPage.verifyCode}"></h:inputHidden>
					            	<h:inputHidden id="verifyPsssword" value="#{createCustomerPage.verifyPsssword}"></h:inputHidden>
								</div>
					        
					    </div>
					</div>
					<div class="right">
				    <p style="font-size:12px;">使用合作网站帐号登录赶集网:</p>
				        <p class="qq-method">
				            <a href="http://www.ganji.com/user/thirdparty/qq_login.php?next=http%3A%2F%2Fsz.ganji.com%2F" class="qq-icon">QQ</a> <span style="color:#ccc;padding:0 5px">|</span>
				            <a href="http://www.ganji.com/user/thirdparty/sina_login.php?next=http%3A%2F%2Fsz.ganji.com%2F" class="weibo-icon">新浪微博</a>
				        </p>
				    </div> 
				</div>
			</div>
        	<div style="clear:both;float:none" />
        </h:form>
        <script type="text/JavaScript">
  			function setRegForm(){
  				var loginName = document.getElementById('username').value;
  				document.getElementById('loginName').value = loginName;
  				var password = document.getElementById('password').value;
  				document.getElementById('loginPassword').value = password;
  				var password2 = document.getElementById('password2').value;
  				document.getElementById('verifyPsssword').value = password2;
  				var verifycode1 = document.getElementById('verifycode1').value;
  				document.getElementById('verifyCode').value = verifycode1;
  				if (document.getElementById('agreeFlag').checked){
  					return true;
  				} else {
  					alert('#{message['please.receive.service.display']}');
  					return false;
  				}
  			}
    	</script>
	</ui:define>
</ui:composition>
</html>

